<template>
	<view class="win" id="message" v-if="show">
		<u-popup :show="show" mode="center" @close="close" :closeable="true"
			:customStyle="{ width: '500rpx', height: '600rpx', display: 'flex', paddinng: '10px 0' }" bgColor="#E74A50">
			<view class="win-bg">
				<image :src="imageUrl"></image>
			</view>
			<view class="win-title">
				{{title}}
			</view>
			<view class="win-content">
				<p>{{ message }}</p>
			</view>
			<view class="win-foot">
				<button class="win-btn" @click="handle">{{buttonName}}</button>
			</view>
		</u-popup>
	</view>
</template>
<script>
export default {
	data() {
		return {
			imageUrl: 'https://www.cetczhxf.com/mp3/warm.png'
		}
	},
	computed: {
		show() {
			return this.$promptStore.state.show;
		},
		message() {
			return this.$promptStore.state.message;
		},
		title() {
			return this.$promptStore.state.title;
		},
		buttonName() {
			return this.$promptStore.state.buttonName;
		},
		bgImage() {
			if(this.$promptStore.state.bgImage == 1) {
				this.imageUrl = 'https://www.cetczhxf.com/mp3/gdtj.png'
			}
		}
	},
	methods: {
		// 关闭
		close() {
			this.show = false
		},
		// 立即处理
		handle() {
			this.$promptStore.commit('hidePrompt')
			this.$promptStore.commit('confirm', 'confirm')
		}
	}
}

</script>
<style scoped>
.win {
	width: 500rpx;
	height: 600rpx;
}

.win-bg {
	width: 100%;
	height: 300rpx;
	border-radius: 10px;
}

.win-bg image {
	width: 100%;
	height: 100%;
}

.win-title {
	width: 100%;
	height: 50rpx;
	line-height: 50rpx;
	font-size: 18px;
	color: #333;
	text-align: center;
	padding: 10rpx 0;
	background-color: #fff;
}

.win-content {
	flex: 1;
	background: #fff;
	padding: 20rpx;
	box-sizing: border-box;
	text-align: center;
	color: #777;
}

.win-foot {
	background: #fff;
	width: 100%;
	height: 100rpx;
}

.win-btn {
	color: #fff;
	font-size: 16px;
	width: 70%;
	height: 36px;
	line-height: 36px;
	border-radius: 8px;
	background: linear-gradient(270deg, #E74A50 0%, #FA805A 99%);
}
</style>